<template>
  <div class="login_con">
    <div class="left">
      <div class="pic_con">
        <div class="top_text">晚期EGFR突变阳性非鳞非小细胞肺癌患者登记研究</div>
        <div class="bottom_pic">
          <div>
            <img src="@/assets/image/pic1.png" alt srcset />
          </div>
          <div>
            <img src="@/assets/image/pic2.png" alt srcset />
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="user_con">
        <div class="username">用户登录</div>
        <Form ref="formInline" :model="formInline" :rules="ruleInline">
          <FormItem prop="user">
            <Input type="text" v-model="formInline.user" placeholder="用户名"></Input>
          </FormItem>
          <FormItem prop="password">
            <Input type="password" v-model="formInline.password" placeholder="密码"></Input>
          </FormItem>
          <Row>
            <Col span="12">
              <Checkbox v-model="single">记住我</Checkbox>
            </Col>
            <Col span="12">
              <div class="label_right">忘记密码</div>
            </Col>
          </Row>
          <FormItem>
            <Button type="primary" long @click="handleSubmit('formInline')">登录</Button>
          </FormItem>
        </Form>
      </div>
    </div>
    <div class="bottom_txt">技术支持：北京佳宸创动科技发展有限公司</div>
  </div>
</template>
<script>
const USER_INFO = {
  userName: "huxingsheng",
  passWord: "zlyy8586",
};
export default {
  data() {
    return {
      single: false,
      formInline: {
        user: "",
        password: "",
      },
      ruleInline: {
        user: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          // {
          //   type: "string",
          //   min: 6,
          //   message: "The password length cannot be less than 6 bits",
          //   trigger: "blur",
          // },
        ],
      },
    };
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (
            this.formInline.user == USER_INFO.userName &&
            this.formInline.password == USER_INFO.passWord
          ) {
            if (this.single) {
              localStorage.setItem("userInfo", USER_INFO);
            }
            this.$Message.success("Success!");
            this.$router.push("/PatientList");
          } else {
            this.$Message.error("Wrong User Information!");
          }
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
  },
  created() {
    let userInfo = localStorage.getItem("userInfo");
    if (userInfo) {
      this.formInline.user = USER_INFO.userName;
      this.formInline.password = USER_INFO.passWord;
    }
  },
};
</script>
<style lang="less" scope>
.login_con {
  background-image: linear-gradient(205deg, #f5f5f5, #afcfee);
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  .left {
    height: 100%;
    width: 60%;
    position: relative;
    float: left;
    .pic_con {
      width: 512px;
      position: absolute;
      right: 140px;
      top: 50%;
      margin-top: -205px;
      .bottom_pic {
        margin-top: 30px;
        > div {
          width: 230px;
          height: 230px;
          display: inline-block;
          img {
            width: 100%;
          }
        }
        > div:last-child {
          width: 160px;
          height: 160px;
          vertical-align: top;
          margin-top: 30px;
          margin-left: 30px;
        }
      }
      .top_text {
        font-size: 30px;
        width: 512px;
        padding-bottom: 20px;
        border-bottom: 1px solid #363435;
        color: #162e35;
      }
    }
  }
  .right {
    width: 40%;
    height: 100%;
    position: relative;
    float: left;
    .username {
      font-size: 46px;
      color: #162e35;
      margin-bottom: 32px;
      text-align: center;
    }
    .user_con {
      width: 310px;
      position: absolute;
      right: 210px;
      top: 50%;
      margin-top: -205px;
      .ivu-input {
        background: none;
        height: 42px;
        line-height: 42px;
        color: #162e35;
        border: 1px solid #53656b;
        font-size: 16px;
      }
      .ivu-form-item-error .ivu-input {
        border: 1px solid #ed4014;
      }
      .ivu-btn-primary {
        height: 54px;
        line-height: 54px;
        background: #162e35;
        font-size: 20px;
        border: none 0;
        margin-top: 25px;
      }
      .ivu-form-item {
        margin-bottom: 30px;
      }
      .label_left {
        float: left;
      }
      .label_right {
        float: right;
      }
    }
  }
  .bottom_txt {
    text-align: center;
    font-size: 14px;
    color: #162e35;
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
  }
}
</style>
